<!-- AdminView.vue -->
<template>
    <el-container class="admin-container">
        <el-aside width="220px">
            <div class="logo">
                <h2>驾校管理系统</h2>
            </div>
            <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @select="handleMenuSelect"
                background-color="#ffffff"
                text-color="#333"
                active-text-color="#409eff"
                unique-opened
                router>
                <el-menu-item index="/admin/homepage">
                    <el-icon><House /></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="/admin/category">
                    <el-icon><Collection /></el-icon>
                    <span>课程类别</span>
                </el-menu-item>
                <el-menu-item index="/admin/course">
                    <el-icon><Document /></el-icon>
                    <span>课程列表</span>
                </el-menu-item>
                <el-menu-item index="/admin/announcements">
                    <el-icon><Bell /></el-icon>
                    <span>公告管理</span>
                </el-menu-item>

                <el-menu-item index="/admin/studentlist">
                    <el-icon>
                        <User/>
                    </el-icon>
                    <span>学员管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/coachlist">
                    <el-icon>
                        <UserFilled/>
                    </el-icon>
                    <span>教练管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/schedule">
                    <el-icon>
                        <Calendar/>
                    </el-icon>
                    <span>排班管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/training_feedback">
                    <el-icon>
                        <ChatLineSquare/>
                    </el-icon>
                    <span>训练记录及反馈</span>
                </el-menu-item>
                <el-menu-item index="/admin/appointment">
                    <el-icon>
                        <Document/>
                    </el-icon>
                    <span>预约管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-container>

            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { House, User, UserFilled, Calendar, Document, Bell, Collection, ChatLineSquare, ArrowDown, Setting, SwitchButton, Expand } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

export default {
    name: 'AdminView',
    components: {
        House,
        User,
        UserFilled,
        Calendar,
        Document,
        Bell,
        Collection,
        ChatLineSquare,
        ArrowDown,
        Setting,
        SwitchButton,
        Expand
    },
    setup() {
        const router = useRouter()

        const handleMenuSelect = (index) => {
            router.push(index)
        }

        const handleCommand = (command) => {
            switch (command) {
                case 'profile':
                    router.push('/admin/profile')
                    break
                case 'settings':
                    // 跳转到设置页面
                    break
                case 'logout':
                    // 清除用户信息
                    localStorage.removeItem('token')
                    localStorage.removeItem('userRole')
                    localStorage.removeItem('userInfo')
                    // 跳转到登录页
                    router.push('/login')
                    break
            }
        }

        const toggleSidebar = () => {
            // 这里可以添加侧边栏切换逻辑
            console.log('切换侧边栏')
        }

        return {
            handleMenuSelect,
            handleCommand,
            toggleSidebar
        }
    }
}
</script>

<style scoped>
.admin-container {
    height: 100vh;
    border: none;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    box-shadow: none;
}

.el-aside {
    background-color: #ffffff;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 100;
    border-right: 1px solid #eaeaea;
}

.logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

.logo h2 {
    color: #333;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.el-menu {
    border-right: none;
    height: calc(100% - 60px);
    background-color: #ffffff !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 220px;
    min-height: 400px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
    color: #666 !important;
    transition: all 0.3s ease;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
    background-color: #f5f7fa !important;
    color: #409eff !important;
}

:deep(.el-menu-item.is-active) {
    color: #409eff !important;
    background-color: #f0f7ff !important;
    border-right: 3px solid #409eff;
}

.el-header {
    background: #ffffff;
    color: #333;
    line-height: 60px;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #eaeaea;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
}

.menu-toggle {
    background-color: #f5f7fa !important;
    border: none !important;
    color: #666 !important;
}

.menu-toggle:hover {
    background-color: #eaeaea !important;
}

.header-actions {
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    color: #333;
    cursor: pointer;
}

.badge-item {
    margin-right: 20px;
}

:deep(.el-badge__content) {
    background-color: #f56c6c !important;
}

.el-main {
    background-color: #f5f7fa;
    padding: 20px;
    height: calc(100vh - 120px);
}

.el-footer {
    background-color: #ffffff;
    color: #666;
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eaeaea;
    padding: 0;
}

.footer-content p {
    margin: 0;
}
</style>
